<template>
    <Layout>
        <v-container>
        <share-box model="kaikong.hardware.product.template" :id="$page.KuERP.pdt[0].id"
                   :url="siteUrl+'/product/' + this.$page.KuERP.pdt[0].id"/>
            <v-row style="padding: 10px;margin: 10px">
                <v-col style="padding: 25px;max-width: 40%">
                    <g-image :src="'data:image/jpeg;base64,'+$page.KuERP.pdt[0].image"
                             style="display: inline-block;max-width: 100%;height: auto;"/>
                </v-col>
                <v-col>
                    <h1 style="align-content: center;color: #046cbd">{{$page.KuERP.pdt[0].name}}</h1>
                    <div><br/>板载Intel第四代或第五代酷睿I3/I5/I7处理器
                        <br/>工业级显示屏+五线电阻式触摸屏
                        <br/>密封无风扇防尘设计
                    </div>
                    <br/>
                    <div>
                        <h3 style="align-content: center;color: #046cbd">相关行业应用</h3>
                        <v-row style="padding: 25px">
                            <v-col style="max-width: 100px">
                                <g-image src="http://www.jrc-tech.com/upload/20180423/s_20180423173543686.jpg"
                                         style="width: 100%"/>
                                <p style="font-size: 12px;text-align: center">数控机床</p></v-col>
                            <v-col>
                                <g-image src="http://www.jrc-tech.com/upload/20180423/s_20180423173543686.jpg"
                                         style="width: 100px"/>
                                <p>数控机床</p></v-col>
                            <v-col>
                                <g-image src="http://www.jrc-tech.com/upload/20180423/s_20180423173543686.jpg"
                                         style="width: 100px"/>
                                <p>数控机床</p></v-col>
                        </v-row>
                    </div>
                </v-col>
            </v-row>
            <v-tabs v-model="tab">
                <v-tab key="t1" href="#t1">概述
                </v-tab>
                <v-tab key="t2" href="#t2">技术规格</v-tab>
                <v-tab key="t3" href="#t3">环境条件</v-tab>
            </v-tabs>
            <v-tabs-items v-model="tab">
                <v-tab-item value="t1">
                    <div v-html="$page.KuERP.pdt[0].content"/>
                </v-tab-item>

                <v-tab-item value="t2"><h3 style="align-content: center;color: #046cbd">技术规格</h3></v-tab-item>

                <v-tab-item value="t3"><h3 style="align-content: center;color: #046cbd">适用场合</h3>
                    <div v-if="$page.KuERP.pdt[0].where" v-html="$page.KuERP.pdt[0].where.wh"></div>
                    <br/>
                    <h3 style="align-content: center;color: #046cbd">使用环境</h3>
                    <div v-if="$page.KuERP.pdt[0].environment" v-html="$page.KuERP.pdt[0].environment.envi"></div>

                </v-tab-item>
            </v-tabs-items>

        </v-container>
    </Layout>
</template>

<page-query>
    query($domain:String!) {
    KuERP{
    pdt:allKaikongHardwareProductTemplate(domain:$domain){
    id
    name
    image
    content
    websiteMetaTitle
    websiteMetaDescription
    websiteMetaKeywords
    where{
    wh: content
    }
    wire{
    content
    }
    environment{
    envi: content
    }
    }
    }}

</page-query>

<script>
    import ShareBox from "../components/ShareBox";
    import config from '../../gridsome.config';

    export default {
        components: {ShareBox},
        data() {
            return {
                siteUrl: config.siteUrl,
                tab: "tab"
            }
        },
        metaInfo() {
            return {
                title: this.$page.KuERP.pdt[0].websiteMetaTitle || this.$page.KuERP.pdt[0].name,
                meta: [{name: "description", conetnt: this.$page.KuERP.pdt[0].websiteMetaDescription},
                    {name: "keywords", content: this.$page.KuERP.pdt[0].websiteMetaKeywords},
                    {"http-equiv": "X-UA-Compatible", content: "IE=edge"},
                    {
                        name: "viewport",
                        content: "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
                    }, {name: "apple-mobile-web-app-capable", content: "yes"},
                    {name: "apple-mobile-web-app-status-bar-style", content: "black"},
                    {name: "format-detection", content: "telephone=no"},
                    {property: "og:type", content: "website"},
                    {
                        property: "og:title",
                        content: this.$page.KuERP.pdt[0].websiteMetaTitle || this.$page.KuERP.pdt[0].name
                    },
                    {property: "og:description", content: this.$page.KuERP.pdt[0].websiteMetaDescription},
                    {property: "og:image", content: this.$page.KuERP.pdt[0].image},
                    {property: "og:url", content: config.siteUrl + '/product/' + this.$page.KuERP.pdt[0].id}]

            }
        },
    };
</script>
